<template>
  <div class="card filter">
    <h4 v-if="title" class="title sle">
      {{ title }}
    </h4>
    <el-input v-model="filterText" placeholder="输入关键字进行过滤" clearable/>
    <el-scrollbar :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
      <el-tree
          ref="treeRef"
          :default-expand-all="defaultExpandAll"
          :node-key="id"
          :data="list"
          :show-checkbox="multiple"
          :check-strictly="false"
          :current-node-key="!multiple?parseInt(this.defaultValue):''"
          :highlight-current="!multiple"
          :expand-on-click-node="false"
          :check-on-click-node="multiple"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :default-checked-keys="multiple ? selected : []"
          :default-expanded-keys="defaultExpandedKeys"
          @node-click="handleNodeClick"
          @check="handleCheckChange"
      >
        <template #default="scope">
          <span class="el-tree-node__label">
            <slot :row="scope">
              {{ scope.node.label }}
            </slot>
          </span>
        </template>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    isChildrenId: {
      type: Boolean,
      default: false
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: 'label'
    },
    // 选中的选项id 默认为字符串id
    id: {
      type: String,
      default: 'id'
    },
    list: {
      type: Array,
      default: () => []
    },
    defaultValue: {
      type: [Array, String]
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeRef.filter(val)
    }
  },
  data() {
    return {
      selected: null,
      filterText: '',
      defaultProps: {
        children: "children",
        label: this.label
      }
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data[this.label].indexOf(value) !== -1
    },
    // 单选的点击事件
    handleNodeClick(data, node2, node3) {
      if (this.multiple) return;
      this.$emit("change", data)
    },
    setSelected() {
      if (this.multiple) this.selected = Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue];
      else {
        this.selected = typeof this.defaultValue === "string" ? this.defaultValue : "";
      }
    },
    // 多选
    handleCheckChange(value1, value2) {
      if (!this.isChildrenId) {
        this.$emit("change", this.getSimpleCheckedNodes(this.$refs.treeRef.store));
      } else {
        this.$emit("change", {currentObj: value1, allNodes: value2.checkedNodes})
      }
    },
    // 处理选中数据，若是全选只返回父级节点，半选则返回所有选中节点
    getSimpleCheckedNodes(store) {
      const checkedNodes = []
      const traverse = function (node) {
        const childNodes = node.root ? node.root.childNodes : node.childNodes;
        childNodes.forEach(child => {
          if (child.checked) {
            checkedNodes.push(child.data)
          }
          if (child.indeterminate) {
            traverse(child)
          }
        })
      }
      traverse(store)
      return checkedNodes
    }
  },
  mounted() {
    this.setSelected()
  }
}
</script>

<style lang="scss">
.filter {
  box-sizing: border-box;
  width: 220px;
  height: 100%;
  padding: 18px;
  margin-right: 10px;
  .title {
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: bold;
    color: #73767a;
    letter-spacing: 0.5px;
  }
  .el-input {
    margin: 0 0 15px;
  }
  .el-scrollbar {
   .el-tree {
      height: 80%;
      overflow: auto;
      .el-tree-node__content {
        height: 33px;
      }
    }
   .el-tree--highlight-current {
      .el-tree-node.is-current > .el-tree-node__content {
        background-color: #3860f4;
        //background-color: #409EFF;
        .el-tree-node__label,
        .el-tree-node__expand-icon {
          color: white;
        }
        .is-leaf {
          color: transparent;
        }
      }
    }
  }
}

</style>
